<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jz-forms</title>
		<link rel="stylesheet" href="css/jz.css"/>
		<!--[if IE]><link rel="stylesheet" href="css/jz-ie.css"/><![endif]-->
        <script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jz-forms.php"></script>
    </head>
    <body>
        <form class="jz" action="." onclick="return {jz:{heedChanges:false,preventSubmit:false}}">
			<dl>
				<dt><label for="input-number">number</label></dt>
				<dd><input value="" class="jz jz-number" id="input-number" name="number" onclick="return {jz:{placeholder:'number',focusOnInit:true,allowNegative:true,allowFloat:true,required:{fn:function(widget) { return widget.getValue() > 10 }}}}"/></dd>
			</dl>
            <dl>
                <dt><label for="input-name">name</label></dt>
                <dd><input value="" class="jz" name="name" id="input-name" onclick="return {jz:{placeholder:'name',required:{min:2},valid:['not',{pattern:/^123$/,invalidCSSClass:'test'}]}}"/></dd>
            </dl>
			<dl>
                <dt><label for="input-date">date</label></dt>
                <dd>
					<input value="2009-02-31" class="jz jz-date" name="date" id="input-date" onclick="return {jz:{onlyMonths:false,required:{}}}"/>
				</dd>
            </dl>
			<dl>
                <dt><label for="input-datetime">date</label></dt>
                <dd>
					<input value="2009-02-31 23:59:77" class="jz jz-datetime" name="datetime" id="input-datetime" onclick="return {jz:{required:{}}}"/>
				</dd>
            </dl>
			<dl>
                <dt><label for="input-combo">combo</label></dt>
                <dd>
					<input style="outline: none;" value="кра" class="jz jz-combo" name="combo" id="input-combo" onclick="return {jz:{placeholder:'test',showAllOnFocus:true,storage:{source:'local',list:['москва', 'красноярск','санкт-перербург','красногорск']}}}"/>
					<input type="button" class="jz-comboarrow"/>
				</dd>
            </dl>
			<dl>
                <dt><label for="input-combo2">suggest</label></dt>
                <dd><input value="" class="jz jz-combo" name="suggest" id="input-combo2" onclick="return {jz:{placeholder:'test',storage:{source:'remote',ajax:{url:'/suggest.php',type:'POST'},values:'name,combo'}}}"/></dd>
            </dl>
			<dl>
				<dt><label for="input-select">select</label></dt>
				<dd>
					<select class="jz" name="select" id="input-select" onclick="return {jz:{valid:[{name:'cb',pattern:/1/},'and',{name:'rb',pattern:/1/}]}}">
						<option value="1">option-1</option>
						<option value="2">option-2</option>
						<option value="3" selected="selected">option-3</option>
					</select>
				</dd>
			</dl>
			<fieldset class="jz" onclick="return {jz:{required:{min:2}}}">
				<legend>Fieldset</legend>
				<dl>
					<dt><label for="f-name-input">Name</label></dt>
					<dd><input type="text" value="22" class="jz" name="f-name" id="f-name-input" onclick="return {jz:{required:{min:2}}}"/></dd>
				</dl>
				<dl>
					<dt><label for="f-last-input">Last Name</label></dt>
					<dd><input type="text" value="1" class="jz" name="f-last" id="f-last-input"/></dd>
				</dl>
			</fieldset>
			<dl>
				<dt><label>radiogroup</label></dt>
				<dd class="jz jz-rbgroup">
					<div>
						<input type="radio" name="rb" class="jz" id="rb-1" value="1"><label for="rb-1">rb-1</label>
					</div>
					<div>
						<input type="radio" name="rb" class="jz" id="rb-2" value="2" checked="checked"><label for="rb-2">rb-2</label>
					</div>
					<div>
						<input type="radio" name="rb" class="jz" id="rb-3" value="3"><label for="rb-3">rb-3</label>
					</div>
				</dd>
			</dl>
			<dl>
				<dt><label>checkboxgroup</label></dt>
				<dd class="jz jz-cbgroup" onclick="return {'jz':{required:{min:2}}}">
					<div>
						<input type="checkbox" name="cb" class="jz" id="cb-1" value="1"><label for="cb-1">cb-1</label>
					</div>
					<div>
						<input type="checkbox" name="cb" class="jz" id="cb-2" value="2" checked="checked"><label for="cb-2">cb-2</label>
					</div>
					<div>
						<input type="checkbox" name="cb" class="jz" id="cb-3" value="3"><label for="cb-3">cb-3</label>
					</div>
				</dd>
			</dl>
            <dl>
                <dt><label for="input-number2">number</label></dt>
                <dd><input class="jz jz-number" name="number2" id="input-number2" onclick="return {jz:{enabled:[{name:'name',pattern:/.{2}/,focusOnEnable:true,hideOnDisable:true},'and',{name:'name',pattern:/.+/,focusOnEnable:true,hideOnDisable:true}]}}"/></dd>
            </dl>
			<fieldset class="jz" onclick="return {jz:{enabled:{name:'name',pattern:/3/}}}">
				<dl>
					<dt><label for="input-last">last</label></dt>
					<dd><input class="jz" name="" id="input-last" onclick="return {jz:{required:{},enabled:{name:'name',pattern:/2/}}}"/></dd>
				</dl>
			</fieldset>
            <div>
                <input type="submit" class="jz" value="Отправить" onclick="return {jz:{disableOnNoReady:true}}"/>
            </div>
        </form>
		<script type="text/javascript">

		$(function() {
			JZ.onInit($('form'), function(event, form) {
				form.bind('ready-change', function(event, form) {
					//console.log(form.isReady());
				});
				//$('.jz-cbgroup').data('jz').setValue([1,3]);
				//$('.jz-rbgroup').data('jz').setValue(1);
				//$('#input-number').data('jz').disable();
				//$('form').data('jz')._destruct();
				//console.log($('form').data('jz').serialize());
			});
			//$('#test')[0].focus();
		});

		</script>
    </body>
</html>
<!--


-->